<!--上传图片-->
<template>
	<view>
		<!--身份证-->
		<view class="idCard item_wrap">
			<view class="title">身份证</view>
			<view class="img_wrap">
				<view class="wrap_z wrap">
					<image v-if="cardlist.length<1" class="image" src="/static/public/zm.png" @click="uploadFile" 
					:data-accessoryType ="1" data-faceback ="face"></image>
					<image v-else class="image" :src="cardlist[0].accessoryShrinkName" @click="previewImg"
					:data-accessoryType ="1" data-faceback ="face" @error="imageError(cardlist, 0)" mode="aspectFit"></image>
					
					<view v-if="cardlist.length>0 && !isOurSelf" class="close" v-on:click.stop="detetImg" :data-id="cardlist[0].id"
						:data-accessoryType ="0">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
					<view class="text">上传身份证正面</view>
				</view>
				<view class="wrap_f wrap">
					<image v-if="cardlistBack.length<1" class="image" src="/static/public/fm.png"  @click="uploadFile" 
					:data-accessoryType ="1" data-faceback ="back"></image>
					<image v-else class="image" :src="cardlistBack[0].accessoryShrinkName" @click="previewImg" mode="aspectFit"
					:data-accessoryType ="1" data-faceback ="back" @error="imageError(cardlistBack, 0)"></image>
	
					<view v-if="cardlistBack.length>0 && !isOurSelf" class="close" v-on:click.stop="detetImg" :data-id="cardlistBack[0].id" 
						:data-accessoryType ="1">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
					<view class="text">上传身份反面</view>
				</view>
			</view>
		</view>
		<!--身份证-->
		
		<!--户口本-->
		<view class="fk item_wrap">
			<view class="title">户口本证件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListBook" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close" v-if="!isOurSelf" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="2" v-if="!isOurSelf">
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--户口本-->
		<!--婚姻照片-->
		<view class="fk item_wrap">
			<view class="title">婚姻证件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListMarriage" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close"  v-if="!isOurSelf" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="3"  v-if="!isOurSelf" >
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--婚姻照片-->
		
		<!--工作照片-->
		<view class="fk item_wrap">
			<view class="title">工作证件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListWork" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image v-if="!isOurSelf" class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="4"  v-if="!isOurSelf">
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--工作照片-->
		
		<!--房产图片-->
		<view class="fk item_wrap">
			<view class="title">房产证件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListHouse" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index" v-if="!isOurSelf"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="5"  v-if="!isOurSelf">
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--房产图片-->
		
		<!--征信-->
		<view class="fk item_wrap">
			<view class="title">征信证件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListCredit" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index"  v-if="!isOurSelf"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="6" v-if="!isOurSelf">
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--征信-->
		
		<!--其他-->
		<view class="fk item_wrap">
			<view class="title">其他附件</view>
			<view class="img_box clearfix">
				<view class="img_s" @click="previewImg" v-for="(item, index) in fileListOther" :key="item.id" 
					:data-accessoryType ="item.accessoryType" :data-url="item.accessorySaveName">
					<image class="img_x" :src="item.accessoryShrinkName"></image>
					<view class="close" v-on:click.stop="detetImg" :data-id="item.id" :data-index="index"  v-if="!isOurSelf"
						:data-accessoryType ="item.accessoryType">
						<uni-icons type="clear" size="24" color="red"></uni-icons>
					</view>
				</view>
				<view class="btn" @click="uploadFile" :data-accessoryType ="7"  v-if="!isOurSelf">
					<uni-icons type="plusempty" size="36" color="#cccccc"></uni-icons>
				</view>
			</view>
		</view>
		<!--其他-->
		<view class="btn_wrap" v-if="isNew">
			<button class="btn" @click="btnSubmit">确 认</button>
		</view>
	</view>
</template>

<script>
	import {showImg, upload, imgErr} from '@/common/util.js'
	export default {
		data() {
			return {
				//身份证正面
				cardlist:[],
				///身份证反面
				cardlistBack: [],
				//户口本图片
				fileListBook: [],
				//婚姻图片
				fileListMarriage: [],
				//工作图片
				fileListWork: [],
				//房产图片
				fileListHouse: [],
				//征信
				fileListCredit: [],
				//其他附件
				fileListOther: []
			}
		},
		props:["flieList", "orderNumber", "productId", "isNew", "isOurSelf"],
		created() {
			this.getOrderFile();
		},
		//监听flieList 
		watch: {
			flieList:{
				handler(val) {
					this.getOrderFile()
				},
				deep:true,
				immediate: true,
			}
		},
		methods:{
			//图片加载失败
			imageError(dataArrary, index){
				imgErr(dataArrary, index, "accessoryShrinkName")	
			},
			//根据订单查询附件
			getOrderFile() {
				let imgFile = this.flieList;
				//身份证正面
				let clist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 1 && item.faceBack == "face") {
					clist.push(item);
				  }
				});
				this.cardlist = clist;
				//身份证反面
				let clistback = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 1 && item.faceBack == "back") {
					clistback.push(item);
				  }
				});
				this.cardlistBack = clistback;
				
				//户口本照片
				let booklist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 2) {
					booklist.push(item);
				  }
				});
				this.fileListBook = booklist;
				
				//婚姻图片
				let Marriagelist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 3) {
					Marriagelist.push(item);
				  }
				});
				this.fileListMarriage = Marriagelist;
				
				//工作图片列表
				let worklist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 4) {
					worklist.push(item);
				  }
				});
				this.fileListWork = worklist;
				
				//房产证图片列表
				let houselist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 5) {
					houselist.push(item);
				  }
				});
				this.fileListHouse = houselist;
				
				//征信图片列表
				let creditlist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 6) {
					creditlist.push(item);
				  }
				});
				this.fileListCredit = creditlist;
				
				//其他附件图标列表
				let otherlist = [];
				imgFile.forEach(item => {
				  if (item.accessoryType == 7) {
					otherlist.push(item);
				  }
				});
				this.fileListOther = otherlist;
			},
			//上传附件
			uploadFile(e) {
				//获取删除附件类型
				if(this.isOurSelf){
					return
				}
				let accessoryType = e.target.dataset.accessorytype ||e.currentTarget.dataset.accessorytype;
				//获取正反面
				let face = e.target.dataset.faceback ||e.currentTarget.dataset.faceback;
				let formData = {};
				formData.orderNumber = this.orderNumber;
				formData.productId = this.productId;
				
				formData.faceBack = face|| "";
				
				formData.accessoryType = accessoryType;
				upload("/applet/order/upload", formData).then(res => {
					let data = res.data[0];
					data.accessorySaveName = data.httpAccessorySaveName;
					data.accessoryShrinkName = data.httpAccessoryShrinkName;
					let accessoryType = data.accessoryType;
					
					
					switch (accessoryType) {
						case 1:
							 if(data.faceBack=="face"){
								this.cardlist.push(data);
							 }else{
								this.cardlistBack.push(data);
							 }
							break;
						case 2:
							this.fileListBook.push(data);
							break;
						case 3:
							this.fileListMarriage.push(data);
							break;
						case 4:
							this.fileListWork.push(data);
							break;
						case 5:
							this.fileListHouse.push(data);
							break;
						case 6:
							this.fileListCredit.push(data);
							break;
						case 7:
							this.fileListOther.push(data);
							break;
						default:
							this.fileListOther.push(data);
							break;
					}
					
				});
				
			},
			//预览图片
			previewImg(e){
				let accessoryType = e.target.dataset.accessorytype ||e.currentTarget.dataset.accessorytype;
				//获取正反面
				let face = e.target.dataset.faceback ||e.currentTarget.dataset.faceback;
				let list = []
				accessoryType = Number(accessoryType);
				switch (accessoryType) {
					case 1:
						if(face =="face"){
							list = this.cardlist;
						}else{
							list = this.cardlistBack;
						}
						break;
					case 2:
						list = this.fileListBook;
						break;
					case 3:
						list = this.fileListMarriage;
						break;
					case 4:
						list = this.fileListWork;
						break;
					case 5:
						list = this.fileListHouse;
						break;
					case 6:
						list = this.fileListCredit;
						break;
					case 7:
						list = this.fileListOther;
						break;
					default:
						list = this.fileListOther;
						break;
				}
				this.showImgList(e, list);
			},
			//展示图片
			showImgList(e, list){
				let urlList = []
				list.map(item => {
				    urlList.push(item.accessorySaveName)
				    return item
				})
				uni.previewImage({
				    urls: urlList,
					indicator: "default",
				    current: e.target.dataset.url ||e.currentTarget.dataset.url
				})
			},
			//删除图片
			detetImg(e){
				let thisObj = this;
				let id = e.target.dataset.id ||e.currentTarget.dataset.id;
				let index =Number(e.target.dataset.index ||e.currentTarget.dataset.index);
				let accessoryType = e.target.dataset.accessorytype ||e.currentTarget.dataset.accessorytype;
				accessoryType = Number(accessoryType);
				const removeItem = (item, i) => item.slice(0, i).concat(item.slice(i + 1, item.length));
				
				uni.showModal({
				    title: '提示',
				    content: '确定删除此附件',
				    success: function (res) {
				        if (res.confirm) {
				           thisObj.$api.detOrderFileByNumber(id).then(res=>{
							   let code = res.data.code;
								if(code == 200){
									switch (accessoryType) {
										case 0:
											thisObj.cardlist = []
											break;
										case 1:
											thisObj.cardlistBack = []
											break;
										case 2:
											thisObj.fileListBook = removeItem(thisObj.fileListBook, index);
											break;
										case 3:
											thisObj.fileListMarriage = removeItem(thisObj.fileListMarriage, index);
											break;
										case 4:
											thisObj.fileListWork = removeItem(thisObj.fileListWork, index);
											break;
										case 5:
											thisObj.fileListHouse = removeItem(thisObj.fileListHouse, index);
											break;
										case 6:
											thisObj.fileListCredit = removeItem(thisObj.fileListCredit, index);
											break;
										case 7:
											thisObj.fileListOther = removeItem(thisObj.fileListOther, index);
											break;
										default:
											thisObj.fileListOther = removeItem(thisObj.fileListOther, index);
											break;
									}
								}
							   }).catch(err=>{
									console.log(err)
							   })
				        } 
				    }
				});
			},
			//确认按钮
			btnSubmit() {
				//判断是否上传身份证正面
				if(this.cardlist.length<1){
					uni.showModal({
					    title: '提示',
					    content: '请上传身份证正面',
					    success: function (res) {}})
					return
				}
				//判断是否上传身份正反面
				if(this.cardlistBack.length<1){
					uni.showModal({
					    title: '提示',
					    content: '请上传身份证反面',
					    success: function (res) {}})
					return
				}
				this.$emit("changeStep", '3')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item_wrap{
		padding: 0 30rpx;
		.title{
			height: 38rpx;
			line-height: 38rpx;
			font-size: 32rpx;
			border-left: 6rpx solid #52aaf8 ;
			padding-left: 20rpx;
			margin-bottom: 30rpx;
			margin-top: 10rpx;
		}
		.img_wrap{
			display: flex;
			justify-content: space-between;
			.wrap{
				width: 334rpx;
				text-align: center;
				position: relative;
				.image{
					width: 100%;
					height: 215rpx;
				}
				.close{
					position: absolute;
					top: -18rpx;
					right: -18rpx;
				}
				.text{
					font-size: 28rpx;
					line-height: 48rpx;
					color: #999999;
				}
			}
		}
		.img_box{
			margin: 20rpx 0;
			margin-right: -80rpx;
			.img_s{
				height: 156rpx;
				width: 156rpx;
				float: left;
				position: relative;
				margin-right: 20rpx;
				margin-bottom: 20px;
				.img_x{
					width: 100%;
					height: 100%;
				}
				.close{
					position: absolute;
					top: -18rpx;
					right: -18rpx;
				}
			}
			.btn{
				height: 156rpx;
				width: 156rpx;
				float: left;
				border: dashed 1px #cccccc;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20px;
			}
		}
	}
	.btn_wrap{
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx 30rpx;
		.btn{
			background: #52AAF8;
			color: #FFFFFF;
			border-radius: 40rpx;
		}
	}
</style>
